<template>
  <div class="container">
    <el-dialog
      :title="
        dialog.dialogType === 'edit'
          ? '批量修改商超改账单'
          : '批量创建商超改账单'
      "
      :visible.sync="dialog.dialogVisible"
      width="100%"
      fullscreen
      center
      :lock-scroll="true"
      @close="hideDialog"
      @open="getData"
    >
      <div class="main">
        <el-form
          ref="form"
          :rules="rules"
          :model="formData"
          label-width="100px"
          label-position="left"
        >
        </el-form>
        <div class="institution">
          <div class="search">
            <p class="searchName">改账供应商：</p>
            <el-select
              v-model="supplierData.value"
              :multiple="false"
              filterable
              remote
              center
              reserve-keyword
              placeholder="请选择供应商"
              :remote-method="supplierMethod"
              :loading="supplierData.loading"
              @change="supplierOn(supplierData.value)"
            >
              <el-option
                v-for="item in supplierData.list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button
              type="primary"
              class="handleSearch"
              icon="el-icon-upload"
              @click="download()"
              style="margin-left: 10px"
              >批量改账模板下载</el-button
            >

            <el-upload
              class="upload-demo"
              style="display: inline; margin-left: 10px"
              action="#"
              :show-file-list="false"
              :http-request="handleAvatarSuccess"
            >
              <el-button
                type="primary"
                class="handleSearch"
                icon="el-icon-circle-plus"
                >批量导入改账结算单</el-button
              >
            </el-upload>
          </div>
          <el-table :data="institutionList" border>
            <el-table-column align="center" prop="serial_code" label="结算单号">
            </el-table-column>
            <el-table-column
              align="center"
              prop="supplierCode"
              label="供应商编码"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="supplierName"
              label="供应商名称"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="rdc_code"
              label="配送中心编码"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="rdc_name"
              label="配送中心名称"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="buyer_code"
              label="采购员编码"
            >
            </el-table-column>
            <el-table-column align="center" prop="buyer" label="采购员名称">
            </el-table-column>
            <el-table-column align="center" prop="amount" label="金额">
            </el-table-column>
            <el-table-column align="center" prop="goods_num" label="数量">
            </el-table-column>
            <el-table-column align="center" prop="goods_price" label="单价">
            </el-table-column>
            <el-table-column label="操作" align="center" width="100px">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="danger"
                  @click="remove(scope)"
                  icon="el-icon-delete"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { Loading } from "element-ui";
import {
  addCorrectBatch,
  editCorrect
} from "@/api/changeAccount/superChangeAccount";
import { selectSupplierList } from "@/api/supplier/supplierList";
export default {
  props: {
    dialog: Object
  },
  data() {
    return {
      institutionList: [],
      formData: {
        amount: 0,
        num: 0,
        price: 0,
        qty: 0
      },
      rules: {},
      supplierData: {
        innerVisible: false,
        value: "",
        id: "",
        list: [],
        loading: false
      }
    };
  },
  created() {},
  methods: {
    // 下载模版
    download() {
      this.$confirm("是否下载模板?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let link = document.createElement("a");
          link.href =
            this.$axios.defaults.baseURL +
            "/smkapi/Correct/downloadTemplte?type=2&token=" +
            getToken();
          link.click();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    //模版导入
    handleAvatarSuccess(param) {
      let loading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.1)"
      });
      let data = new window.FormData();
      data.append("ufile", param.file);
      data.append("token", getToken());
      this.$axios.post("/smkapi/Correct/importCorrect", data).then(res => {
        loading.close();
        console.log(res);
        if (res.data.code == 0) {
          res.data.data.statements.forEach(item => {
            item.supplierName = res.data.data.supplier.name;
            item.supplierCode = res.data.data.supplier.code;
          });
          this.institutionList = res.data.data.statements;
        } else {
          this.$message({
            type: "info",
            message: res.data.msg
          });
        }
      });
    },

    //获取供应商Id
    supplierOn(id) {
      this.supplierData.id = id;
      console.log(this.supplierData);
    },
    // 嵌套搜索供应商数据
    supplierMethod(query) {
      if (query !== "") {
        this.getSupplierList(query);
      } else {
        this.supplierData.list = [];
      }
    },

    //获取供应商数据
    getSupplierList(query = "") {
      let data = {
        name: query,
        page: 1,
        limit: 100
      };
      this.supplierData.loading = true;
      selectSupplierList(data).then(res => {
        this.supplierData.list = res.data.paginate.data.map(item => {
          return {
            value: `${item.id}`,
            label: `[${item.code}]${item.name}`
          };
        });
        this.supplierData.loading = false;
      });
    },

    //删除机构
    remove(scope) {
      this.institutionList.forEach((res, index) => {
        if (res.id == scope.row.id) {
          this.institutionList.splice(index, 1);
        }
      });
    },
    getData() {
      this.getSupplierList();
    },
    hideDialog() {
      this.institutionList = [];

      this.supplierData = {
        innerVisible: false,
        value: "",
        list: [],
        loading: false
      };

      this.dialog.dialogVisible = false;
    },
    //提交
    confirm() {
      let statementids = [];
      this.institutionList.forEach(res => {
        statementids.push(res.id);
      });
      let data = {
        supplier_id: this.supplierData.id,
        statementids: statementids.join(",")
      };
      console.log(data, 99999);
      if (this.dialog.dialogType == "edit") {
        // data.id = this.dialog.id;
        // editCorrect(data)
        //   .then(res => {
        //     if (res.code == 0) {
        //       this.$message({
        //         message: res.message || res.msg,
        //         type: "success"
        //       });
        //       this.hideDialog();
        //       this.$emit("upData");
        //     } else {
        //       this.$message({
        //         message: res.message || res.msg,
        //         type: "error"
        //       });
        //     }
        //   })
        //   .catch(res => {
        //     console.log(res);
        //   });
      } else {
        addCorrectBatch(data)
          .then(res => {
            if (res.code == 0) {
              this.$message({
                message: res.message || res.msg,
                type: "success"
              });
              this.hideDialog();
              this.$emit("upData");
            } else {
              this.$message({
                message: res.message || res.msg,
                type: "error"
              });
            }
          })
          .catch(res => {
            console.log(res);
          });
      }
    },
    //取消
    cancel() {
      this.hideDialog();
    }
  }
};
</script>
<style scoped>
.main .inp {
  width: 400px;
}
.main .inps {
  padding: 0;
  border-radius: 4px;
  color: #606266;
  display: inline-block;
  height: 37px;
  line-height: 37px;
  padding: 0 15px;

  width: 400px;
  margin: 0;
}

.search {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  height: 45px;
}
.search .searchName {
  width: 100px;
  font-size: 14px;
  color: #606266;
  font-weight: 700;
}
.search .searchInp {
  width: 250px;
  margin-right: 10px;
}
.el-form-item__content {
  height: 40px !important;
  overflow: hidden;
}
.el-form-item {
  margin-bottom: 15px !important;
  height: 40px !important;
  overflow: hidden;
}
</style>
